<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>旅游大数据分析大屏</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
  <style>
    body {
      background: linear-gradient(120deg, #232946 0%, #181c2a 100%);
      color: #fff;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      margin: 0; padding: 0;
    }
    .header {
      text-align: center;
      padding: 36px 0 12px 0;
      background: rgba(24,28,42,0.97);
      box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    }
    .header h1 {
      font-size: 2.7rem;
      color: #6ee7b7;
      margin: 0;
      letter-spacing: 2px;
      font-weight: bold;
      text-shadow: 0 2px 8px #23294688;
    }
    .header p {
      color: #a5b4fc;
      font-size: 1.15rem;
      margin: 10px 0 0 0;
      letter-spacing: 1px;
    }
    .dashboard {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-start;
      padding: 28px 2vw 28px 2vw;
      gap: 32px;
    }
    .panel {
      background: rgba(35,41,70,0.98);
      border-radius: 18px;
      box-shadow: 0 6px 32px rgba(0,0,0,0.22);
      padding: 22px 22px 14px 22px;
      margin-bottom: 28px;
      flex: 1 1 420px;
      min-width: 340px;
      max-width: 540px;
      transition: box-shadow 0.2s, transform 0.2s;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .panel:hover {
      box-shadow: 0 12px 40px #6ee7b7aa;
      transform: translateY(-6px) scale(1.025);
    }
    .panel h2 {
      font-size: 1.22rem;
      margin: 0 0 16px 0;
      color: #6ee7b7;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: bold;
    }
    .echart {
      width: 100%;
      height: 320px;
      min-height: 220px;
      max-height: 400px;
      margin-bottom: 8px;
      border-radius: 12px;
      background: #232946;
      box-shadow: 0 2px 12px #23294644;
      transition: box-shadow 0.2s;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #232946;
      color: #fff;
      margin-bottom: 8px;
      border-radius: 10px;
      overflow: hidden;
      font-size: 1rem;
    }
    th, td {
      border: 1px solid #2e3650;
      padding: 7px 10px;
      text-align: center;
    }
    th {
      background: #232946;
      color: #6ee7b7;
      font-weight: bold;
    }
    tr:nth-child(even) { background: #232946; }
    tr:hover { background: #2d334d; }
    @media (max-width: 1100px) {
      .dashboard { flex-direction: column; align-items: stretch; }
      .panel { min-width: unset; max-width: unset; }
    }
    @media (max-width: 600px) {
      .header h1 { font-size: 1.5rem; }
      .panel { padding: 10px 4px 8px 4px; }
      .echart { height: 200px; min-height: 120px; }
      table { font-size: 0.9rem; }
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.0.0/dist/echarts-wordcloud.min.js"></script>
  <script src="data_analysis_new.js"></script>
</head>
<body>
  <div class="header">
    <h1><i class="fa fa-bar-chart"></i> 旅游大数据分析大屏</h1>
    <p>多维度洞察景点热度、用户行为与市场趋势，助力智慧旅游决策</p>
  </div>
  <div class="dashboard">
    <div class="panel">
      <h2><i class="fa fa-fire"></i> 热门景点Top10
        <span style="font-size:0.9rem;color:#a5b4fc;">（点击柱状图可查看详情）</span>
      </h2>
      <div id="hotSpotsBar" class="echart"></div>
      <div id="hotSpotDetail" style="color:#fff;font-size:1rem;margin-top:8px;"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-scatter-chart"></i> 订单数与评论数关系</h2>
      <div id="orderCommentScatter" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-pie-chart"></i> 用户评分分布</h2>
      <div id="scoreDistBar" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-scatter-chart"></i> 评分与订单数关系</h2>
      <div id="scoreOrderScatter" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-money"></i> 价格分布</h2>
      <div id="priceDistBar" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-scatter-chart"></i> 价格与订单数关系</h2>
      <div id="priceOrderScatter" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-star"></i> 性价比Top10</h2>
      <div id="bestValueBar" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-comments"></i> 高评论数景点</h2>
      <table id="topCommentTable"></table>
    </div>
    <div class="panel">
      <h2><i class="fa fa-thumbs-up"></i> 高评分高订单景点</h2>
      <table id="highScoreOrderTable"></table>
    </div>
    <div class="panel">
      <h2><i class="fa fa-thumbs-down"></i> 低评分低订单景点</h2>
      <table id="lowScoreOrderTable"></table>
    </div>
    <div class="panel">
      <h2><i class="fa fa-map-marker"></i> 景点分布地图</h2>
      <div id="mapChart" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-bar-chart"></i> 最近一个月售出门票数量Top10城市</h2>
      <div id="recentMonthCityTop10Bar" class="echart"></div>
    </div>
    <div class="panel">
      <h2><i class="fa fa-cloud"></i> 平均评分最高的20个城市词云</h2>
      <div id="cityScoreWordCloud" class="echart"></div>
    </div>
  </div>
  <script>
    // 热门景点Top10（带点击交互）
    const hotSpotsChart = echarts.init(document.getElementById('hotSpotsBar'));
    hotSpotsChart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: hotSpots.map(x=>x.name), axisLabel: {rotate: 30, color:'#fff'} },
      yAxis: { type: 'value', name: '订单数', axisLabel: {color:'#fff'} },
      series: [{
        data: hotSpots.map(x=>x.value),
        type: 'bar',
        itemStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#6ee7b7'},{offset:1,color:'#38bdf8'}])},
        emphasis: {itemStyle: {color:'#fbbf24'}}
      }]
    });
    hotSpotsChart.on('click', function(params){
      const spot = hotSpots[params.dataIndex];
      document.getElementById('hotSpotDetail').innerHTML = `<b>景点：</b>${spot.name} <b>订单数：</b>${spot.value}`;
    });

    // 订单数与评论数关系
    const orderCommentChart = echarts.init(document.getElementById('orderCommentScatter'));
    orderCommentChart.setOption({
      tooltip: { trigger: 'item', formatter: p => `订单数: ${p.data[0]}<br>评论数: ${p.data[1]}` },
      xAxis: { name: '订单数', axisLabel: {color:'#fff'} },
      yAxis: { name: '评论数', axisLabel: {color:'#fff'} },
      series: [{
        symbolSize: 8,
        data: orderCommentScatter.map(x=>[x.order, x.comment]),
        type: 'scatter',
        itemStyle: {color:'#fbbf24'}
      }]
    });

    // 用户评分分布
    const scoreDistChart = echarts.init(document.getElementById('scoreDistBar'));
    scoreDistChart.setOption({
      tooltip: {},
      xAxis: { type: 'category', data: scoreDist.map(x=>x.range), axisLabel: {color:'#fff'} },
      yAxis: { type: 'value', name: '景点数量', axisLabel: {color:'#fff'} },
      series: [{ data: scoreDist.map(x=>x.value), type: 'bar', itemStyle: {color:'#38bdf8'} }]
    });

    // 评分与订单数关系
    const scoreOrderChart = echarts.init(document.getElementById('scoreOrderScatter'));
    scoreOrderChart.setOption({
      tooltip: { trigger: 'item', formatter: p => `评分: ${p.data[0]}<br>订单数: ${p.data[1]}` },
      xAxis: { name: '评分', axisLabel: {color:'#fff'} },
      yAxis: { name: '订单数', axisLabel: {color:'#fff'} },
      series: [{
        symbolSize: 8,
        data: scoreOrderScatter.map(x=>[x.score, x.order]),
        type: 'scatter',
        itemStyle: {color:'#f472b6'}
      }]
    });

    // 价格分布
    const priceDistChart = echarts.init(document.getElementById('priceDistBar'));
    priceDistChart.setOption({
      tooltip: {},
      xAxis: { type: 'category', data: priceDist.map(x=>x.range), axisLabel: {color:'#fff'} },
      yAxis: { type: 'value', name: '景点数量', axisLabel: {color:'#fff'} },
      series: [{ data: priceDist.map(x=>x.value), type: 'bar', itemStyle: {color:'#f472b6'} }]
    });

    // 价格与订单数关系
    const priceOrderChart = echarts.init(document.getElementById('priceOrderScatter'));
    priceOrderChart.setOption({
      tooltip: { trigger: 'item', formatter: p => `价格: ${p.data[0]}<br>订单数: ${p.data[1]}` },
      xAxis: { name: '价格', axisLabel: {color:'#fff'} },
      yAxis: { name: '订单数', axisLabel: {color:'#fff'} },
      series: [{
        symbolSize: 8,
        data: priceOrderScatter.map(x=>[x.price, x.order]),
        type: 'scatter',
        itemStyle: {color:'#a3e635'}
      }]
    });

    // 性价比Top10
    const bestValueChart = echarts.init(document.getElementById('bestValueBar'));
    bestValueChart.setOption({
      tooltip: {},
      xAxis: { type: 'category', data: bestValueSpots.map(x=>x.name), axisLabel: {rotate: 30, color:'#fff'} },
      yAxis: { type: 'value', name: '性价比', axisLabel: {color:'#fff'} },
      series: [{ data: bestValueSpots.map(x=>x.value), type: 'bar', itemStyle: {color:'#fbbf24'} }]
    });

    // 高评论数景点表格
    function renderTable(id, data, columns) {
      let html = '<tr>' + columns.map(c=>`<th>${c.title}</th>`).join('') + '</tr>';
      data.forEach(row => {
        html += '<tr>' + columns.map(c=>`<td>${row[c.key]}</td>`).join('') + '</tr>';
      });
      document.getElementById(id).innerHTML = html;
    }
    renderTable('topCommentTable', topCommentSpots, [
      {title:'景点', key:'name'}, {title:'评论数', key:'comment'}, {title:'订单数', key:'order'}, {title:'评分', key:'score'}
    ]);
    renderTable('highScoreOrderTable', highScoreOrderSpots, [
      {title:'景点', key:'name'}, {title:'评分', key:'score'}, {title:'订单数', key:'order'}
    ]);
    renderTable('lowScoreOrderTable', lowScoreOrderSpots, [
      {title:'景点', key:'name'}, {title:'评分', key:'score'}, {title:'订单数', key:'order'}
    ]);

    // 地图可视化
    const mapChart = echarts.init(document.getElementById('mapChart'));
    fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full')
      .then(response => response.json())
      .then(geoJson => {
        echarts.registerMap('china', geoJson);
        mapChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: function (p) {
              if (p.seriesType === 'scatter') {
                return `${p.data.name}<br>订单数: ${p.data.order}<br>评分: ${p.data.score}`;
              }
              if (p.seriesType === 'map') {
                return `${p.data.name}<br>景点数量: ${p.data.value}`;
              }
              return p.name;
            }
          },
          visualMap: {
            min: 0,
            max: Math.max(...provinceSpotCount.map(x=>x.value)),
            left: 'left',
            top: 'bottom',
            text: ['多','少'],
            inRange: { color: ['#f44336', '#ffeb3b', '#4caf50', '#2196f3', '#9c27b0'] },
            calculable: true
          },
          geo: {
            map: 'china',
            roam: true,
            label: { show: false },
            itemStyle: { areaColor: '#232946', borderColor: '#6ee7b7' },
            emphasis: { itemStyle: { areaColor: '#6ee7b7' } }
          },
          series: [
            {
              name: '景点分布',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: mapData.map(x=>({ name: x.name, value: [x.lng, x.lat], order: x.order, score: x.score })),
              symbolSize: v => Math.max(8, Math.sqrt(v.order)),
              itemStyle: { color: '#fbbf24' }
            },
            {
              name: '景点数量',
              type: 'map',
              map: 'china',
              geoIndex: 0,
              data: provinceSpotCount
            }
          ]
        });
      });

    // 最近一个月售出门票数量Top10城市
    const recentMonthCityTop10Chart = echarts.init(document.getElementById('recentMonthCityTop10Bar'));
    recentMonthCityTop10Chart.setOption({
      tooltip: {},
      xAxis: { type: 'category', data: recentMonthCityTop10.map(x=>x.name), axisLabel: {rotate: 30, color:'#fff'} },
      yAxis: { type: 'value', name: '售出门票数', axisLabel: {color:'#fff'} },
      series: [{ data: recentMonthCityTop10.map(x=>x.value), type: 'bar', itemStyle: {color:'#6ee7b7'} }]
    });

    // 平均评分最高的20个城市词云
    const cityScoreWordCloudChart = echarts.init(document.getElementById('cityScoreWordCloud'));
    cityScoreWordCloudChart.setOption({
      tooltip: {},
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        sizeRange: [18, 60],
        rotationRange: [-90, 90],
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: { color: () => `hsl(${Math.random()*360},80%,60%)` },
        data: cityScoreWordCloud
      }]
    });
  </script>
</body>
</html> 